<template>
    <div class="home-footer">
        <a href="/" class="nav">
            <div class="nav-footer">
                <div class="iconfont icon-home"></div>
                首页
            </div>
        </a>
        <a href="/cook" class="nav">
            <div class="nav-footer">
                <div class="iconfont icon-add1"></div>
                写菜谱
            </div>
        </a>
        <a href="/mycenter" class="nav">
            <div class="nav-footer">
                <div  class="iconfont icon-my"></div>
                我的
            </div>
        </a>
    </div>
</template>

<style lang="scss">
    .home-footer {
        position:  fixed;
        bottom:  0;
        left:  0;
        width: 100%;
        height: 32px;
        display:  flex;
        background: #ffcc26;
        color:  #4a4a4a;
        a.nav {
            flex: 1;
            color: #4a4a4a;
            font-size: 10px;
            text-decoration: none;
        }
        .nav-footer {
            flex: 1;
            .add,.iconfont{
                border-top: 1px solid #fc3;
                border-radius: 40px;
                width: 32px;
                height: 32px;
                margin: -13px auto -3px;
                background: #fc3;
                color:#fff;
                font-size: 26px;
                line-height: 28px;
            }
            .iconfont.icon-shouye {
                font-weight: 600;
            }
        }

    }
</style>
